<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-wmts</title>
        <!--引入第三方的jquery脚本库-->
        <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
        <style type="text/css">
            #main {
                margin: 0 0;
                width: 100%;
                height: 100vh;
            }
            #toolbar-wrapper {
                position: absolute;
                z-index: 9999;
                display: inline-flex;
                overflow-x: hidden;
                overflow-y: visible;
                top: 20px;
                left: 20px;
            }
            .toolbar-item {
                background: #ffffff;
                border: 1px dashed #666666;
                text-align: center;
                font-size: 20px;
                line-height: 20px;
                height: fit-content;
                padding: 6px 16px;
                cursor: pointer;
            }
            #map {
                height: 100vh;
                width: 100%;
            }
            .label {
                color: #3bb2d0;
                font-size: 16px;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-map
                id="map"
                :map-style="mapStyle"
                :zoom="mapZoom"
                :center="outerCenter"
                :crs="mapCrs"
                v-on:load="handleMapLoad"
            >
                <mapgis-ogc-wmts-layer
                :wmts-layer="layerArcGis"
                :layer-id="layerWmtsId"
                :source-id="sourceWmtsId"
                :base-url="wmtsurl"
                :tile-matrix-set="tileMatrixSetArcGis"
                > </mapgis-ogc-wmts-layer>
            </mapgis-web-map>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        mapStyle: {
                            //设置版本号，一定要设置
                            version: 8,
                            //添加来源
                            sources: {},
                            //设置加载并显示来源的图层信息
                            layers: []
                        }, // 地图样式
                        mapZoom: 1, // 地图初始化级数
                        outerCenter: [116.39, 40.2], // 地图显示中心
                        mapCrs: 'EPSG:3857',

                        layerWmtsId: 'ogcwmts_layerId',
                        sourceWmtsId: 'ogcwmts_sourceId',

                        wmtsurl:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/WMTS",
                        tileMatrixSetArcGis:"default028mm",
                        layerArcGis:"ChinaOnlineCommunity",
                        // wmtsurl:
                        //     '/?layer=&style=default&tilematrixset=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}'
                        //
                    };
                },
                methods: {
                    enableMeasure() {
                        const component = this.$refs.measureref;
                        if (component) {
                            component.enableMeasure();
                        }
                    },
                    handleMapLoad(payload) {
                        this.map = payload.map;
                    }
                }
            });
        </script>
    </body>
</html>
